<template>
  <el-dialog v-model="open" width="60%" @open="initDataView" append-to-body :show-close="false" @close="close">
    <template #title>
      <el-row justify="space-between">
        <span>版本号{{ dataViewParams.versionCode }}</span>
        <!-- <el-button type="primary" @click="downloadDataView" size="small">
          <el-icon>
            <Edit />
          </el-icon>
          导出
        </el-button> -->
      </el-row>
    </template>
    <template #default>
      <p></p>
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-form-item label="省" prop="provinceId">
          <el-select v-model="queryParams.provinceId" @change="chooseProvince" clearable>
            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityId">
          <el-select v-model="queryParams.cityId" @change="chooseCity" clearable>
            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区县" prop="countyId">
          <el-select v-model="queryParams.countyId" @change="changeCounty" clearable>
            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="queryParams.keyword" clearable></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <template v-if="type == 'kilometerGrid'">
        <el-tabs v-model="tabType" type="card" class="demo-tabs" @tab-change="getList">
          <el-tab-pane v-for="item in optionData" :key=item.dictItemCode :label="item.dictItemName"
            :name="item.dictItemCode">
            <el-table v-loading="loading" :data="dataList" stripe>
              <el-table-column v-for="item in tableTitleList" :label="item.label" align="center" :prop="item.prop" />
            </el-table>

            <el-row style="padding-bottom: 20px;">
              <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.page"
                v-model:limit="queryParams.rows" @pagination="getList" />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else>
        <el-table v-loading="loading" :data="dataList" stripe>
          <el-table-column v-for="item in tableTitleList" :label="item.label" align="center" :prop="item.prop" />
        </el-table>

        <el-row style="padding-bottom: 20px;width: 100%;">
          <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.page"
            v-model:limit="queryParams.rows" @pagination="getList" />
        </el-row>
      </template>
      <p></p>
    </template>
  </el-dialog>
</template>
<script setup>
import { queryDataViewRk } from '@/api/basicDataManage/population'
import { getProvince, getChildArea } from "@/api/system/division"
import { getDataTyes } from '@/api/basicDataManage/kilometerGrid/index.js'

const props = defineProps({
  open: Boolean,
  dataViewParams: Object,
  type: String
})
const emits = defineEmits(['update:open'])
const { proxy } = getCurrentInstance()

const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0,
  versionCode: props.dataViewParams.versionCode
})
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const dataList = ref([])
const tableTitleList = ref([])
const loading = ref(false)

// 省市县
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  })
}
const chooseProvince = (value) => {
  queryParams.value.city = null
  queryParams.value.county = null
  queryParams.value.cityId = null
  queryParams.value.countyId = null
  cityData.value = []
  areaData.value = []
  queryParams.value.province = provinceData.value.find(item => item.id == value)?.name
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
}
const chooseCity = (value) => {
  queryParams.value.county = null
  queryParams.value.countyId = null
  areaData.value = []
  queryParams.value.city = cityData.value.find(item => item.id == value)?.name
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
}

const changeCounty = (value) => {
  queryParams.value.county = areaData.value.find(item => item.id == value)?.name
}

const initDataView = async () => {
  getProvinceData()
  await getType()
  getList()
}

const getList = () => {
  loading.value = true
  let params = {
    ...queryParams.value,
    versionCode: props.dataViewParams.versionCode,
    typeCode: props.type == 'kilometerGrid' ? tabType.value : ''
  }
  queryDataViewRk(props.dataViewParams.baseUrl, params).then(res => {
    loading.value = false
    queryParams.value.total = res.data.total
    tableTitleList.value = res.data.title
    dataList.value = res.data.data
  })
}

const downloadDataView = () => {
  const { downloadUrl, typeCode, versionCode } = props.dataViewParams
  console.log(downloadUrl, typeCode, versionCode)
  let params = props.type == 'kilometerGrid' ? { dataType: tabType.value, versionCode } : { typeCode, versionCode }
  let fileName = '数据视图'
  if(props.type == 'kilometerGrid'){
    fileName = '数据视图-' + optionData.value.find(item => item.dictItemCode == tabType.value)?.dictItemName
  }
  proxy.download(downloadUrl, params, `${fileName}${new Date().getTime()}.xls`)
}

const reset = () => {
  proxy.resetForm('queryRef')
  queryParams.value.province = null
  queryParams.value.city = null
  queryParams.value.county = null
  queryParams.value.page = 1
  getList()
}

const close = () => {
  emits('update:open', false)
}

// 获取数据类别
const tabType = ref('')
const optionData = ref([])
async function getType() {
  let res = await getDataTyes('jzwglgwlx')
  optionData.value = res.data;
  tabType.value = optionData.value[0]?.dictItemCode
}
</script>